<template>
    <div class="environment-variables table-content">
        <pui-dialog :maskClick="false" :title="props.title" v-model="componentRef.dialogVisible" :animate="props.animate" width="800px" isFooter>
            <template #content>
                <div class="list">
                    <div class="list-head item">
                        <span class="index">序号</span>
                        <span class="name">参数名称</span>
                        <span class="value">值</span>
                        <span class="mark">描述</span>
                    </div>
                    <div class="item" v-for="(item, i) in __reactive.simulationSystemParams" :key="i">
                        <span class="index">{{i >= 9 ? '' : '0'}}{{i + 1}}</span>
                        <span class="name">{{item.name}}</span>
                        <span class="value ellipsis-1" v-if="item.disabled || item.name === 'sampling_rate'">{{Number.parseFloat(item.value).toExponential() || '-'}}</span>
                        <span class="value ellipsis-1" v-else-if="!item.showValueEdit" @dblclick="item.showValueEdit = true">{{Number.parseFloat(item.value).toExponential() || '-'}}</span>
                        <span class="value" v-else><input class="pui-input" type="text" v-model="item.value" @input="onInput($event, item)"/></span>
                        <span class="mark">{{item.nameTag}}</span>
                    </div>
                </div>
            </template>
            <template #footer>
                <!-- <pui-button>应用</pui-button> -->
                <pui-button type="primary" @click="submit">确定</pui-button>
                <pui-button @click="closeDialog">取消</pui-button>
            </template>
        </pui-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { PhotParameter } from '@/common/types/phot_types';
export default defineComponent({
    name: 'EnvironmentVariables',
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, nextTick } from 'vue'
import { graphManager } from '@/services/phot_client/graph'

const { proxy }: any = getCurrentInstance()

const props = defineProps({
    title: {
        type: String,
        default: '系统变量设置'
    },
    animate: {
        type: String,
        default: 'fade'
    }
})

const __reactive = reactive({
    simulationSystemParams: [],
    systemGlobalSimulationParameter: null
}) as any
const componentRef = reactive({
    dialogVisible: false
})
const getGraphParameters = async () => {
    const parameters = await graphManager.getGraphParameters()
    return parameters
}
const init = async () => {
    componentRef.dialogVisible = true
    // const parameters = await getGraphParameters()
    // __reactive.simulationSystemParams = []
    // parameters.map((item: any) => {
    //     item.showValueEdit = false
    //     if (item.name !== 'sampling_rate') {
    //         __reactive.simulationSystemParams.push(item)
    //     }
    // })
    __reactive.systemGlobalSimulationParameter = await getGraphParameters()
    __reactive.simulationSystemParams = __reactive.systemGlobalSimulationParameter.systemGlobalSimulationParameter
    console.log(__reactive.simulationSystemParams)
    // __reactive.simulationSystemParams.map((item: any) => {
    //     item.showValueEdit = false
    // })
}
const closeDialog = () => {
    componentRef.dialogVisible = false
}
const submit = async () => {
    try {
        proxy.$loading.open('正在修改系统变量...')
        __reactive.simulationSystemParams.map((item: any) => {
            delete item.showValueEdit
        })
        await graphManager.alterGraphParameters(__reactive.simulationSystemParams)
        proxy.$toast({
            value: '修改成功',
            type: 'success'
        })
        proxy.$loading.close()
    } catch (err: any) {
        console.log(err)
        proxy.$toast({
            value: err,
            type: 'error'
        })
        proxy.$loading.close()
    }
    closeDialog()
}

const onInput = (e: any, item: any) => {
    const factor = __reactive.simulationSystemParams.find((item: any) => item.name === 'up_sampling_factor')
    const baud = __reactive.simulationSystemParams.find((item: any) => item.name === 'total_baud')
    const rate = __reactive.simulationSystemParams.find((item: any) => item.name ==='sampling_rate')
    if (item.name ==='up_sampling_factor' || item.name === 'total_baud') {
        rate.value = (Number.parseFloat(factor.value) * Number.parseFloat(baud.value)).toString()
    }
}

defineExpose({
    init,
    closeDialog
})
</script>